<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本语法</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            border: 3px solid blue;
        }
        .box1 {
            width: 200px;
            height: 150px;
            background-color: chocolate;
            margin-top: 20px;
        }

        .box2{
            font-size: 30px;
            color: white;
        }

        .box3{
            font-size: 30px;
            color:crimson;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div class="box1">文本内容</div>

    <p>
        <input type="radio" name="sex" value="0">保密
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2">女

    </p>

    <p>
        <input type="text" name="username" id="username" placeholder="请输入用户名">
    </p>

    <p id="p">
        段落文本
    </p>

    <p id="p1">
        js段落文本
    </p>

    <p>
        <img src="./img/GitHub头像.jpg" alt="" id="img"  style="width: 200px;">
    </p>

    <button type="button" id="btn">js点击事件</button>
    <button type="button" id="btn1">jq点击事件</button>
    <button type="button" id="btn2">点击隐藏或者显示</button>
</body>

</html>
<script src="./jQuery-3.7.1.js"></script>
<script>
    // js
    let box = document.getElementById('box')
    console.log(box)

    let box1 = document.getElementsByClassName('box1')
    console.log(box1)

    
    let sex = document.getElementsByName('sex')
    console.log(sex)

    let username = document.getElementById('username')
    console.log(username)   

    let p = document.getElementById("p")

    let img = document.getElementById("img")

    let btn = document.getElementById('btn')
    console.log(btn)


    btn.onclick = function(){
        console.log("js点击事件")
        box.style.border = '3px solid red'
        box1[0].className += 'box2'
        console.log(username.value)

        let str = "<span>追加的span标签</span>"
        // 更改文本内容
        p.innerHTML = str

        let span = document.createElement("span")
        span.innerText = "我是创建的span标签";
        p.appendChild(span)
        // 更改属性
        img.setAttribute('src', './img/微信图片_20250507170141.jpg')
    }
    console.log("-----------------------------------------")

    // jq
    console.log($("#box"))
    console.log($(".box1"))
    console.log($("input[name='sex']"))

    $('#btn1').click(function(){
        console.log("jq点击事件")
        //更改样式
        $("#box").css("background-color","red")
        // 更改文本
        $(".box1").text("更改后的文本")
        // 添加类名
        $(".box1").addClass("box3")
        // 获取input的的值
        console.log($("#username").val())

        $("#p1").html("<span>JQhtml内容添加</span>")
        $("#p1").append("<span>JQ追加内容</span>")

        $("#img").attr('src', './img/微信图片_20250507170143.jpg')
    })

    $("#btn2").click(function(){
        $("#img").fadeToggle()
    })
</script>